zheg
<template>
  <div class="bg-gradient-to-br from-slate-900 via-gray-900 to-black text-white">
    <div class="max-w-7xl mx-auto px-6 py-12">
      <!-- 页面标题 -->
      <div class="text-center mb-16">
        <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
          会员卡密兑换
        </h1>
        <p class="text-xl text-gray-300 max-w-2xl mx-auto">使用卡密快速开通会员权益，享受专业的足球数据查询服务</p>
      </div>

      <div class="max-w-6xl mx-auto mb-20 flex flex-col lg:flex-row gap-4">
        <!-- 注意事项 -->
        <div class="lg:w-2/5 xl:w-1/3">
          <div
            class="bg-gradient-to-br from-slate-800/60 to-slate-700/40 backdrop-blur-lg rounded-2xl p-6 border border-slate-600/20 h-full"
          >
            <h3 class="text-xl font-bold text-white mb-6 text-center flex items-center justify-center">
              <i class="i-carbon-warning-alt text-yellow-400 mr-2"></i>
              重要注意事项
            </h3>
            <div class="space-y-4">
              <div class="flex items-start p-3 bg-emerald-500/10 rounded-lg border-l-4 border-emerald-500">
                <span class="text-sm text-gray-300">1. 每个卡密仅可使用一次，请妥善保管</span>
              </div>
              <div class="flex items-start p-3 bg-emerald-500/10 rounded-lg border-l-4 border-emerald-500">
                <span class="text-sm text-gray-300">2. 兑换成功后会员权益立即生效</span>
              </div>
              <div class="flex items-start p-3 bg-yellow-500/10 rounded-lg border-l-4 border-yellow-500">
                <span class="text-sm text-gray-300">3. 请确保在兑换前已登录账号</span>
              </div>
              <div class="flex items-start p-3 bg-amber-500/10 rounded-lg border-l-4 border-amber-500">
                <span class="text-sm text-gray-300">4. 请勿将卡密分享给他人使用</span>
              </div>
              <div class="flex items-start p-3 bg-amber-500/10 rounded-lg border-l-4 border-amber-500">
                <span class="text-sm text-gray-300">5. 如遇兑换问题，请及时联系客服</span>
              </div>
              <div class="flex items-start p-3 bg-red-500/10 rounded-lg border-l-4 border-red-500">
                <span class="text-sm text-gray-300">6. 卡密一经使用，不支持退款</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 卡密兑换区域 -->
        <div class="lg:w-3/5 xl:w-2/3">
          <div
            class="bg-gradient-to-br from-slate-800/60 to-slate-700/40 backdrop-blur-lg rounded-2xl p-8 border border-slate-600/20 h-full"
          >
            <div class="text-center mb-8">
              <Logo :show-text="false" :turn="false" class="mb-2 w-fit" />
              <h2 class="text-2xl font-bold text-white mb-2">兑换卡密</h2>
              <p class="text-gray-400">输入您的卡密即可立即开通对应会员权益</p>
            </div>

            <div class="space-y-6">
              <div>
                <input
                  v-model="cardCode"
                  type="text"
                  placeholder="请输入卡密"
                  class="w-full px-4 py-3 bg-black/20 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-yellow-500 focus:ring-1 focus:ring-yellow-500 transition-all"
                  maxlength="60"
                />
              </div>

              <CButton
                :loading="isRedeeming"
                :disabled="!cardCode || cardCode.length < 16"
                class="w-full !py-3 text-lg"
                @click="handleRedeem"
              >
                <i class="i-carbon-gift mr-2"></i>
                立即兑换
              </CButton>

              <div class="text-center">
                <p class="text-sm text-gray-400">
                  没有卡密？
                  <NuxtLink to="/card-redeem" class="text-yellow-400 hover:text-yellow-300 transition-colors">查看购买方式</NuxtLink>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';
import { queryCheckCard, queryRedeemCard } from '~/apis/card';

const cardCode = ref('');
const isRedeeming = ref(false);

const userStore = useUserStore();
const handleRedeem = async () => {
  try {
    isRedeeming.value = true;
    const res = await queryCheckCard(cardCode.value);
    isRedeeming.value = true;
    if (!res.data) {
      await ElMessageBox.confirm('卡密会员与您当前会员不一致，会覆盖掉当前会员，是否继续兑换？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      });
    }
    await queryRedeemCard(cardCode.value).finally(() => (isRedeeming.value = false));
    await userStore.onGetUserInfo();
    cardCode.value = '';
    ElMessage.success('兑换成功，会员已到账！');
  } catch (error) {
    isRedeeming.value = false;
  }
};
</script>
